import { Tag, Tooltip } from 'antd';
import { useEffect, useState } from 'react';

/**
 * 标签选择器
 * @param props 属性
 * @param props.options 标签选项 [{label: '标签1', 'tooltip': '提示信息', value: '1'}, {label: '标签2', tooltip: '提示信息', value: '2'}]
 * @param props.values 默认选中值 ['1', '2']
 * @param props.onChange 标签选择变化回调函数
 */
export default function TagSelect(props) {
  const { options = [], values, onChange } = props;

  // 选中值
  const [selectedValues, setSelectedValues] = useState([]);

  useEffect(() => {
    if (
      Array.isArray(selectedValues) &&
      Array.isArray(values) &&
      selectedValues.join(',') !== values.join(',')
    ) {
      setSelectedValues(values);
    }
  }, [values]);

  // 标签选择变化回调函数
  function handleChange(checked, option) {
    let list = [];
    if (checked) {
      list = [...selectedValues, option?.value];
    } else {
      list = selectedValues.filter((item) => item !== option?.value);
    }
    // 更新选中值
    setSelectedValues(list);
    // 调用父组件的回调函数
    if (onChange) {
      onChange(list);
    }
  }

  return (
    <div>
      {Array.isArray(options) &&
        options.map((option) => {
          const widget = (
            <Tag.CheckableTag
              style={
                selectedValues.includes(option?.value)
                  ? null
                  : { border: '1px solid #d9d9d9', backgroundColor: '#f5f5f5' }
              }
              key={option?.value}
              checked={selectedValues.includes(option?.value)}
              onChange={(checked) => handleChange(checked, option)}
            >
              {option?.label}
            </Tag.CheckableTag>
          );
          if (option?.tooltip) {
            return (
              <Tooltip key={option?.value} title={option?.tooltip}>
                {widget}
              </Tooltip>
            );
          }
          return widget;
        })}
    </div>
  );
}
